<template>
  <div class="todo-item" v-bind:class="{ 'is-completed':todo.completed }">
    <p>
      <input type="checkbox" v-on:change="markComplete" />
      {{todo.title}}
      <button @click="$emit('del-todo',todo.id)" class="del">x</button>

    </p>
  </div>
</template>

<script>
export default {
  name: "TodoItem",
  props: ["todo"],
  methods: {
    markComplete() {
      this.todo.completed = !this.todo.completed;
    },
  },
};
</script>


<style scoped>


.todo-item {
  background: #f4f4f4;
  padding: 10px;
  text-align: left;
  border-bottom: 1px dotted #ccc;
}
.is-completed {
  text-decoration: line-through;
}
.del {
  background: #ff0000;
  border-color:transparent;
  color: #fff;
  border-radius: 50%;
  float:right;
  width: 18px;

}
</style>